// 所有咨询者
<template>
  <div class="all">

    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStudentInfo()" size="small">查询</el-button>
        <el-button type="warning" @click="resetTeacherInfo()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="pagination.records"
      size="small"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="咨询师"
        width="180">
      </el-table-column>
      <el-table-column
        prop="question"
        label="问题描述"
      >
      </el-table-column>
      <el-table-column
        prop="symptom"
        label="症状">
      </el-table-column>
      <el-table-column
        prop="flag"
        width="100"
        label="状态"
        :formatter="handFlag"
      >
      </el-table-column>
      <el-table-column
        prop="createDate"
        width="180"
        label="咨询时间">
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="view(scope.row.id)" type="primary" size="small">回 复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[6, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="page">
    </el-pagination>

    <el-dialog
      title="咨询结果"
      :visible.sync="dialogVisible"
      width="50%">

      <el-form ref="form" :model="form" label-width="120px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="咨询师" prop="teacherName">
          <el-input v-model="form.teacherName" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex" disabled>
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="问题描述" prop="question">
          <el-input v-model="form.question" type="textarea" disabled></el-input>
        </el-form-item>
        <el-form-item label="主要症状" prop="symptom">
          <el-input v-model="form.symptom" type="textarea" disabled></el-input>
        </el-form-item>
        <el-form-item label="建议" prop="idea">
          <el-input v-model="form.idea" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="结果" prop="result">
          <el-input v-model="form.result" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="submit" type="primary">提  交</el-button>
    <el-button @click="dialogVisible = false">关  闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pagination : {
          //分页后的考试信息
          current : 1 , //当前页
          total : null , //记录条数
          size : 10 //每页条数
        } ,
        form : {} ,
        dialogVisible : false,
        formInline:{
          userName:'',
          userId:''
        }
      };
    } ,
    created () {
      this.getStudentInfo ();
    } ,
    methods : {
      resetTeacherInfo(){
        this.formInline.userName = ''
        this.getStudentInfo()
      },
      getStudentInfo () {
        //分页查询所有试卷信息
        this.formInline.userId = this.$cookies.get ( "cid" )
        this.$axios (
          {
            methods : 'get' ,
            url : '/api/consults' ,
            params : {
              page : this.pagination.current ,
              size : this.pagination.size,
              userName: this.formInline.userName,
              userId:this.formInline.userId
            }
          } ).then ( res => {
          this.pagination = res.data.data;
        } ).catch ( error => {
        } );
      } ,
      //改变当前记录条数
      handleSizeChange ( val ) {
        this.pagination.size = val;
        this.getStudentInfo ();
      } ,
      //改变当前页码，重新发送请求
      handleCurrentChange ( val ) {
        this.pagination.current = val;
        this.getStudentInfo ();
      } ,
      checkGrade ( studentId ) {
        this.$router.push ( { path : "/grade" , query : { studentId : studentId } } );
      } ,
      view ( id ) {
        this.dialogVisible = true
        this.$axios ( `/api/consult/${ id }` ).then ( res => {
          this.form = res.data.data
        } )
      } ,
      submit () {
        this.$axios ( {
          url : '/api/updateConsult' ,
          method : 'put' ,
          data : {
            ... this.form
          }
        } ).then ( res => {
          if ( res.data.code == 200 ) {
            this.$message ( {
              message : '回复成功' ,
              type : 'success'
            } )
          }
          this.dialogVisible = false
          this.getStudentInfo ()
        } )
      } ,
      handFlag ( rowData ) {
        if ( rowData.flag === '0' ) {
          return '未回复'
        } else {
          return '已回复'
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .all {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }

    .el-table tr {
      background-color: #dd5862 !important;
    }
  }

  .el-table .warning-row {
    background: #000 !important;
  }

  .el-table .success-row {
    background: #dd5862;
  }
</style>
